<template>
  <div class="flow-container">
    <div class="resource-page">
      <div class="sidebar">
        <div class="sidebar-header">
          <el-icon class="header-icon"><Grid /></el-icon>
          分类方式
        </div>
        <el-radio-group v-model="categoryMode" class="category-mode">
          <el-radio-button label="category">
            <el-icon class="mode-icon"><Folder /></el-icon>
            按分类
          </el-radio-button>
          <el-radio-button label="fileType">
            <el-icon class="mode-icon"><Document /></el-icon>
            按文件类型
          </el-radio-button>
        </el-radio-group>
        <div class="category-list" v-if="categoryMode === 'category'">
          <el-radio-group :model-value="selectedCategory" class="category-radio-group" @change="handleCategoryChange">
            <el-radio-button :label="null" :class="{ 'custom-checked': selectedCategory === null }">
              <el-icon class="category-tag-icon"><Collection /></el-icon>
              全部
            </el-radio-button>
            <el-radio-button
              v-for="cat in categoryList"
              :key="cat.id"
              :label="cat.id"
              :class="{ 'custom-checked': selectedCategory === cat.id }"
              @click="toggleCategory(cat.id)"
            >
              <el-icon class="category-tag-icon">
                <Document v-if="cat.name === '文档'" />
                <Notebook v-else-if="cat.name === '课件'" />
                <Edit v-else-if="cat.name === '试卷'" />
                <MoreFilled v-else />
              </el-icon>
              {{ cat.name }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="category-list" v-else>
          <el-radio-group :model-value="selectedFileType" class="category-radio-group" @change="handleFileTypeChange">
            <el-radio-button :label="null" :class="{ 'custom-checked': selectedFileType === null }">
              <el-icon class="category-tag-icon"><Collection /></el-icon>
              全部
            </el-radio-button>
            <el-radio-button 
              v-for="type in fileTypeList" 
              :key="type" 
              :label="type"
              :class="{ 'custom-checked': selectedFileType === type }"
              @click="toggleFileType(type)"
            >
              <el-icon class="category-tag-icon">
                <Document v-if="type.includes('pdf') || type.includes('doc')" />
                <Notebook v-else-if="type.includes('ppt')" />
                <Grid v-else-if="type.includes('xls')" />
                <FolderOpened v-else-if="type.includes('zip')" />
                <Edit v-else-if="type.includes('md')" />
                <MoreFilled v-else />
              </el-icon>
              {{ type }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <el-button type="primary" class="upload-btn" @click="showUpload = true">
          <el-icon class="upload-icon"><Upload /></el-icon>
          上传资源
        </el-button>
      </div>
      <div class="main-content">
        <div class="content-header">
          <div class="header-title">
            <el-icon class="main-title-icon"><Files /></el-icon>
            <h2>共享资料库</h2>
            <div class="header-subtitle">发现和分享优质学习资源</div>
          </div>
          <div class="resource-stats">
            <div class="stat-card">
              <el-icon class="stat-icon"><Document /></el-icon>
              <div class="stat-info">
                <div class="stat-number">{{ resourceStats.totalCount }}</div>
                <div class="stat-label">资源总数</div>
              </div>
            </div>
            <div class="stat-card">
              <el-icon class="stat-icon"><User /></el-icon>
              <div class="stat-info">
                <div class="stat-number">{{ resourceStats.contributorCount }}</div>
                <div class="stat-label">贡献者</div>
              </div>
            </div>
            <div class="stat-card">
              <el-icon class="stat-icon"><Download /></el-icon>
              <div class="stat-info">
                <div class="stat-number">{{ resourceStats.totalDownload }}</div>
                <div class="stat-label">总下载</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="search-bar">
          <div class="search-container">
            <el-icon class="search-icon"><Search /></el-icon>
            <el-input 
              placeholder="搜索资料（支持标题、描述、上传者）" 
              v-model="searchText" 
              clearable
              class="custom-search-input"
              @keyup.enter.native="doSearch"
            />
            <el-button class="search-btn" :disabled="!searchText.trim()" @click="doSearch">
              <el-icon class="search-btn-icon"><Search /></el-icon>
              搜索
            </el-button>
          </div>
        </div>
        <div class="resource-list">
          <el-card v-for="item in filteredResources" :key="item.id" class="resource-card" @click="goDetail(item)">
            <!-- 资源类型徽章 -->
            <div class="resource-type-badge">
              <el-icon class="type-badge-icon">
                <Document v-if="item.fileType === '.pdf' || item.fileType === '.doc' || item.fileType === '.docx'" />
                <Notebook v-else-if="item.fileType === '.ppt' || item.fileType === '.pptx'" />
                <Grid v-else-if="item.fileType === '.xls' || item.fileType === '.xlsx'" />
                <FolderOpened v-else-if="item.fileType === '.zip'" />
                <Edit v-else-if="item.fileType === '.md'" />
                <MoreFilled v-else />
              </el-icon>
            </div>
            
            <!-- 举报图标放到卡片右上角 -->
            <span
              class="report-icon"
              @click="openReport(item.id, $event)"
              :title="'举报该资料'"
            >
              <el-icon class="report-icon-svg"><Warning /></el-icon>
            </span>
            
            <div class="resource-title">
              <el-icon class="title-prefix-icon"><Star /></el-icon>
              {{ item.title }}
            </div>
            
            <div class="resource-info">
              <span class="info-tag">
                <el-icon class="info-icon"><Files /></el-icon>
                类型: {{ item.fileType }}
              </span>
              <span class="info-tag">
                <el-icon class="info-icon"><Collection /></el-icon>
                分类: {{ item.categoryName }}
              </span>
              <span class="info-tag">
                <el-icon class="info-icon"><DataBoard /></el-icon>
                大小: {{ formatSize(item.fileSize) }}
              </span>
              <span class="info-tag">
                <el-icon class="info-icon"><User /></el-icon>
                上传者: {{ item.userName || item.nickname }}
              </span>
              <span class="info-tag">
                <el-icon class="info-icon"><Clock /></el-icon>
                时间: {{ formatDate(item.createdAt) }}
              </span>
              <span class="info-tag">
                <el-icon class="info-icon"><Download /></el-icon>
                下载: {{ item.downloadCount }}
              </span>
            </div>
            
            <div class="resource-desc">{{ item.description }}</div>
            
            <div class="resource-actions" @click.stop>
              <el-button
                :class="['like-btn', { liked: item.isLiked }]"
                @click="toggleLike(item, $event)"
              >
                <el-icon class="action-icon">
                  <StarFilled v-if="item.isLiked" />
                  <Star v-else />
                </el-icon>
                <span>{{ item.likeCount }}</span>
              </el-button>
              <el-button class="download-btn" @click="download(item, $event)">
                <el-icon class="action-icon"><Download /></el-icon>
                下载
              </el-button>
            </div>
          </el-card>
        </div>
        
        <!-- 资源详情弹窗 -->
        <el-dialog 
          v-model="showResourceDetail" 
          :title="selectedResource?.title || '资源详情'" 
          width="50%" 
          :modal="true"
          :close-on-click-modal="true"
          :fullscreen="false"
          class="resource-detail-dialog"
          :append-to-body="true"
        >
          <div v-if="selectedResource" class="resource-detail-content">
            <div class="detail-header">
              <div class="detail-type-badge">
                <el-icon class="detail-badge-icon">
                  <Document v-if="selectedResource.fileType === '.pdf' || selectedResource.fileType === '.doc' || selectedResource.fileType === '.docx'" />
                  <Notebook v-else-if="selectedResource.fileType === '.ppt' || selectedResource.fileType === '.pptx'" />
                  <Grid v-else-if="selectedResource.fileType === '.xls' || selectedResource.fileType === '.xlsx'" />
                  <FolderOpened v-else-if="selectedResource.fileType === '.zip'" />
                  <Edit v-else-if="selectedResource.fileType === '.md'" />
                  <MoreFilled v-else />
                </el-icon>
              </div>
              <div class="detail-title">{{ selectedResource.title }}</div>
            </div>
            
            <div class="detail-info-grid">
              <div class="detail-info-item">
                <el-icon class="detail-info-icon"><Files /></el-icon>
                <span class="detail-info-label">文件类型：</span>
                <span class="detail-info-value">{{ selectedResource.fileType }}</span>
              </div>
              <div class="detail-info-item">
                <el-icon class="detail-info-icon"><Collection /></el-icon>
                <span class="detail-info-label">分类：</span>
                <span class="detail-info-value">{{ selectedResource.categoryName }}</span>
              </div>
              <div class="detail-info-item">
                <el-icon class="detail-info-icon"><DataBoard /></el-icon>
                <span class="detail-info-label">文件大小：</span>
                <span class="detail-info-value">{{ formatSize(selectedResource.fileSize) }}</span>
              </div>
              <div class="detail-info-item">
                <el-icon class="detail-info-icon"><User /></el-icon>
                <span class="detail-info-label">上传者：</span>
                <span class="detail-info-value">{{ selectedResource.userName || selectedResource.nickname }}</span>
              </div>
              <div class="detail-info-item">
                <el-icon class="detail-info-icon"><Clock /></el-icon>
                <span class="detail-info-label">上传时间：</span>
                <span class="detail-info-value">{{ formatDate(selectedResource.createdAt) }}</span>
              </div>
              <div class="detail-info-item">
                <el-icon class="detail-info-icon"><Download /></el-icon>
                <span class="detail-info-label">下载次数：</span>
                <span class="detail-info-value">{{ selectedResource.downloadCount }}</span>
              </div>
            </div>
            
            <div class="detail-description">
              <h4 class="description-title">
                <el-icon class="description-icon"><ChatDotRound /></el-icon>
                资源描述
              </h4>
              <div class="description-content">
                {{ selectedResource.description || '暂无描述' }}
              </div>
            </div>
            
            <div class="detail-actions">
              <el-button
                :class="['detail-like-btn', { liked: selectedResource.isLiked }]"
                @click="toggleLike(selectedResource, $event)"
              >
                <el-icon class="action-icon">
                  <StarFilled v-if="selectedResource.isLiked" />
                  <Star v-else />
                </el-icon>
                点赞 ({{ selectedResource.likeCount }})
              </el-button>
              <el-button class="detail-download-btn" @click="download(selectedResource, $event)">
                <el-icon class="action-icon"><Download /></el-icon>
                下载资源
              </el-button>
            </div>
          </div>
          
          <template #footer>
            <div class="detail-dialog-footer">
              <el-button @click="showResourceDetail = false">
                <el-icon><Close /></el-icon>
                关闭
              </el-button>
            </div>
          </template>
        </el-dialog>
        
        <!-- 举报弹窗 -->
        <ReportModal
          v-if="showReport && reportTargetId"
          v-model:visible="showReport"
          :reporterID="userId"
          targetType="RESOURCE"
          :targetId="reportTargetId"
        />
        <el-pagination
          v-if="total > pageSize"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
          class="custom-pagination"
        />
      </div>
      
      <el-dialog v-model="showUpload" title="上传资源" width="500px" class="upload-dialog">
        <div class="upload-header">
          <el-icon class="upload-header-icon"><Upload /></el-icon>
          <h3>分享您的学习资源</h3>
          <p>帮助更多同学一起学习进步</p>
        </div>
        
        <el-form :model="uploadForm" class="upload-form">
          <el-form-item label="标题">
            <el-input v-model="uploadForm.title" placeholder="请输入资源标题">
              <template #prefix>
                <el-icon><Edit /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="uploadForm.categoryId" placeholder="请选择分类">
              <template #prefix>
                <el-icon><Collection /></el-icon>
              </template>
              <el-option v-for="cat in categoryList" :key="cat.id" :label="cat.name" :value="cat.id">
                <el-icon style="margin-right: 8px;">
                  <Document v-if="cat.name === '文档'" />
                  <Notebook v-else-if="cat.name === '课件'" />
                  <Edit v-else-if="cat.name === '试卷'" />
                  <MoreFilled v-else />
                </el-icon>
                {{ cat.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="uploadForm.description" type="textarea" placeholder="请描述资源内容">
              <template #prefix>
                <el-icon><ChatDotRound /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="文件">
            <el-upload
              :auto-upload="false"
              :show-file-list="true"
              :limit="1"
              :multiple="false"
              v-model:file-list="displayFileList"
              class="upload-component"
            >
              <el-button type="primary">
                <el-icon><FolderAdd /></el-icon>
                选择文件
              </el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showUpload = false">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
            <el-button type="primary" @click="submitUpload">
              <el-icon><Upload /></el-icon>
              上传
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- <div class="report-modal-container">
      <ReportModal
        v-if="showReport"
        v-model:visible="showReport"
        :reporterID="userId"
        targetType="RESOURCE"
        :targetId="reportTargetId"
      />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { getResourceList, likeResource, unlikeResource, hasLikedResource, downloadResource, uploadResource, getResourceStats } from '@/api/resources'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../stores/user'
import ReportModal from '@/components/ReportModal.vue'
import { 
  Grid, Folder, Document, Collection, Notebook, Edit, MoreFilled, 
  Upload, Files, User, Download, Search, Star, StarFilled, DataBoard, 
  Clock, Warning, FolderOpened, FolderAdd, Close, ChatDotRound 
} from '@element-plus/icons-vue'

const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const resourceList = ref<any[]>([])
const categoryList = ref([
  { id: 1, name: '文档' },
  { id: 2, name: '课件' },
  { id: 3, name: '试卷' },
  { id: 4, name: '其他' }
])
const fileTypeList = ref(['pdf', 'docx', 'pptx', 'xlsx', 'zip', 'doc', 'md', '其他'])
const categoryMode = ref<'category' | 'fileType'>('category')
const selectedCategory = ref<number | null>(null)
const selectedFileType = ref<string | null>(null)
const searchText = ref('')
const showUpload = ref(false)
const uploadForm = ref({ title: '', categoryId: null, description: '', file: null })
const displayFileList = ref<any[]>([])
const downloadLoading = ref<{[key:number]: boolean}>({})
const userStore = useUserStore()
const userId = Number(userStore.id || 1)

// 举报弹窗相关
const showReport = ref(false)
const reportTargetId = ref<number | null>(null)

const fetchResources = async () => {
  const params: any = { pageNum: pageNum.value, pageSize: pageSize.value }
  if (categoryMode.value === 'category' && selectedCategory.value) params.categoryId = selectedCategory.value
  if (categoryMode.value === 'fileType' && selectedFileType.value) params.fileType = '.' + selectedFileType.value
  const res = await getResourceList(params)
  console.log('资源接口返回：', res)
  
  // 字段映射函数：根据categoryId匹配categoryName
  const formatResource = (item: any) => ({
    ...item,
    categoryName: categoryList.value.find(cat => cat.id === item.categoryId)?.name || '未分类'
  })
  
  // 兼容多种后端返回结构
  if (res.code === 0 || res.code === 200) {
    let list = []
    if (Array.isArray(res.data)) {
      list = res.data
      total.value = res.data.length
    } else if (res.data?.records) {
      list = res.data.records
      total.value = res.data.total
    } else if (res.data?.list) {
      list = res.data.list
      total.value = res.data.total
    } else if (res.data?.data?.list) {
      list = res.data.data.list
      total.value = res.data.data.total
    } else {
      resourceList.value = []
      total.value = 0
      return
    }
    
    // 应用字段映射
    resourceList.value = list.map(formatResource)
  } else {
    resourceList.value = []
    total.value = 0
  }
}

// 分类/文件类型切换时重置页码并刷新
watch([categoryMode, selectedCategory, selectedFileType], () => {
  pageNum.value = 1
  fetchResources()
})

onMounted(() => {
  fetchResources()
  fetchResourceStats()
})

const handlePageChange = (p: number) => {
  pageNum.value = p
  fetchResources()
}

const doSearch = () => {
  pageNum.value = 1
}

const filteredResources = computed(() => {
  let list = resourceList.value
  // 分类/文件类型过滤
  if (categoryMode.value === 'fileType' && selectedFileType.value) {
    list = list.filter(r => r.fileType === '.' + selectedFileType.value)
  }
  // 搜索过滤
  if (searchText.value.trim()) {
    const kw = searchText.value.trim().toLowerCase()
    list = list.filter(item =>
      (item.title && item.title.toLowerCase().includes(kw)) ||
      (item.description && item.description.toLowerCase().includes(kw)) ||
      (item.userName && item.userName.toLowerCase().includes(kw)) ||
      (item.nickname && item.nickname.toLowerCase().includes(kw))
    )
  }
  return list
})

// 资源详情弹窗相关
const showResourceDetail = ref(false)
const selectedResource = ref<any>(null)

const goDetail = (resource: any) => {
  selectedResource.value = resource
  showResourceDetail.value = true
}

const formatSize = (size: number) => {
  if (!size) return '0B'
  if (size < 1024) return size + 'B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + 'KB'
  if (size < 1024 * 1024 * 1024) return (size / 1024 / 1024).toFixed(1) + 'MB'
  return (size / 1024 / 1024 / 1024).toFixed(1) + 'GB'
}

// 新增：格式化日期为 YYYY-MM-DD
const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  if (isNaN(d.getTime())) return dateStr
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const toggleLike = async (item: any, e: Event) => {
  e.stopPropagation()
  if (item.isLiked) {
    const res = await unlikeResource(item.id, userId)
    if (res.code === 200) {
      item.isLiked = false
      item.likeCount--
      ElMessage.success('取消点赞成功')
    } else {
      ElMessage.error(res.message || '取消点赞失败')
    }
  } else {
    // 新增：点赞前先判断是否已点赞
    const hasLikeRes = await hasLikedResource(item.id, userId)
    if (hasLikeRes && (hasLikeRes.code === 0 || hasLikeRes.code === 200) && hasLikeRes.data === true) {
      ElMessage.info('已经点过赞了')
      item.isLiked = true
      return
    }
    const res = await likeResource(item.id, userId)
    if (res.code === 200) {
      item.isLiked = true
      item.likeCount++
      ElMessage.success('点赞成功')
    } else {
      ElMessage.error(res.message || '点赞失败')
    }
  }
}

const download = async (item: any, e: Event) => {
  e.stopPropagation()
  if (downloadLoading.value[item.id]) return // 防止重复点击
  downloadLoading.value[item.id] = true
  item.downloadCount++
  try {
    const res = await downloadResource(item.id, userId)
    console.log('downloadResource 返回：', res)
    if (res && res.fileUrl) {
      window.open(res.fileUrl, '_blank')
    } else {
      item.downloadCount-- // 回退
      ElMessage.error(res.message || '下载失败，未获取到文件地址')
      console.error('下载失败，响应内容：', res)
    }
  } catch (err: any) {
    item.downloadCount-- // 回退
    ElMessage.error(err.message || '下载失败')
    console.error('下载异常：', err)
  } finally {
    downloadLoading.value[item.id] = false
  }
}

const submitUpload = async () => {
  // 校验
  if (!uploadForm.value.title || !uploadForm.value.categoryId || !displayFileList.value.length) {
    ElMessage.warning('请填写完整信息')
    return
  }
  // 取 el-upload 的 fileList[0].raw 作为 File
  const fileObj = displayFileList.value[0]?.raw; // 这里必须是 raw
  if (!(fileObj instanceof File)) {
    ElMessage.error('文件类型错误，请重新选择文件');
    return;
  }
  // FormData 顺序严格按后端Controller参数顺序
  const formData = new FormData();
  formData.append('userId', String(userId));
  formData.append('userNickname', userStore.nickname || '匿名用户'); // 使用用户昵称或默认值
  formData.append('title', uploadForm.value.title);
  formData.append('description', uploadForm.value.description);
  formData.append('categoryId', String(uploadForm.value.categoryId));
  formData.append('file', fileObj);
  const res = await uploadResource(formData);
  if (res.code === 200) {
    ElMessage.success('已成功上传资源，感谢您对ClassTopia的支持')
    showUpload.value = false
    uploadForm.value = { title: '', categoryId: null, description: '', file: null }
    displayFileList.value = []
    fetchResources()
  } else {
    ElMessage.error(res.message || '上传失败，请稍后重试')
  }
}

const toggleCategory = (id: number) => {
  if (selectedCategory.value === id) {
    selectedCategory.value = null;
  } else {
    selectedCategory.value = id;
  }
};

// 新增：点击已选标签可取消选中
const handleCategoryChange = (val: number|null) => {
  if (selectedCategory.value === val) {
    selectedCategory.value = null;
  } else {
    selectedCategory.value = val;
  }
};
const handleFileTypeChange = (val: string|null) => {
  if (selectedFileType.value === val) {
    selectedFileType.value = null;
  } else {
    selectedFileType.value = val;
  }
};
const toggleFileType = (type: string) => {
  if (selectedFileType.value === type) {
    selectedFileType.value = null;
  } else {
    selectedFileType.value = type;
  }
};

const openReport = (id: number, e: Event) => {
  e.stopPropagation()
  reportTargetId.value = id
  showReport.value = true
}

const resourceStats = ref({ totalCount: 0, contributorCount: 0, totalDownload: 0 })

const fetchResourceStats = async () => {
  try {
    const res = await getResourceStats()
    if (res && (res.code === 0 || res.code === 200) && res.data) {
      resourceStats.value = res.data
    }
  } catch (e) {
    // 可选：错误处理
    resourceStats.value = { totalCount: 0, contributorCount: 0, totalDownload: 0 }
  }
}
</script>

<style scoped>
/* 主容器样式 */
.resource-page {
  display: flex;
  gap: 32px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
}

/* 侧边栏样式 */
.sidebar {
  width: 200px;
  height: fit-content;
  position: sticky;
  top: 0px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 250, 255, 0.98) 100%);
  padding: 32px 24px;
  margin-left:100px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid rgba(162, 89, 236, 0.15);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(162, 89, 236, 0.15), 0 4px 16px rgba(162, 89, 236, 0.1);
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover {
  box-shadow: 0 8px 40px rgba(162, 89, 236, 0.2), 0 4px 16px rgba(162, 89, 236, 0.15);
  transform: translateY(-2px);
}

.sidebar-header {
  font-weight: 700;
  font-size: 20px;
  color: var(--primary-purple);
  margin-bottom: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gradient-purple);
  border-radius: 2px;
}

.header-icon {
  font-size: 22px;
  color: var(--primary-purple);
}

.category-mode {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

.category-mode :deep(.el-radio-button) {
  flex: 1;
}

.category-mode :deep(.el-radio-button__inner) {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(162, 89, 236, 0.10); /* 更淡更细 */
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px; /* 更小字体 */
  padding: 6px 10px; /* 更小内边距 */
  min-height: 32px; /* 更小高度 */
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 100%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-mode :deep(.el-radio-button__inner:hover) {
  border-color: rgba(162, 89, 236, 0.18); /* hover 也很淡 */
  background: rgba(162, 89, 236, 0.06);
  color: var(--primary-purple);
  box-shadow: none;
  transform: none;
}

.category-mode :deep(.el-radio-button.is-active .el-radio-button__inner) {
  background: var(--gradient-purple);
  color: white;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.mode-icon {
  font-size: 16px;
}

.category-list {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-list :deep(.el-radio-button__inner) {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(91, 110, 225, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  padding: 10px 16px;
  transition: all 0.3s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-list :deep(.el-radio-button.is-active .el-radio-button__inner),
.category-list :deep(.el-radio-button.custom-checked .el-radio-button__inner) {
  background: var(--gradient-blue);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-blue);
}

.category-list :deep(.el-radio-button__inner:hover) {
  border-color: var(--primary-blue);
  background: rgba(91, 110, 225, 0.1);
  color: var(--primary-blue);
  transform: translateX(4px);
}

.category-tag-icon {
  font-size: 16px;
  color: inherit;
}

.upload-btn {
  margin-top: auto;
  background: linear-gradient(135deg, #a259ec 0%, #8b5cf6 100%);
  color: white;
  border: none;
  font-weight: 600;
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(162, 89, 236, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.upload-btn:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(162, 89, 236, 0.4);
}

.upload-icon {
  font-size: 18px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  max-width: 800px; /* 限制最大宽度 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 250, 255, 0.98) 100%);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(162, 89, 236, 0.15);
  box-shadow: 0 8px 40px rgba(162, 89, 236, 0.15), 0 4px 16px rgba(162, 89, 236, 0.1);
  padding: 36px;
  margin-left:5px;
  min-height: 600px;
}

/* 内容头部 */
.content-header {
  margin-bottom: 36px;
}

.header-title {
  text-align: center;
  margin-bottom: 24px;
}

.header-title h2 {
  font-size: 2.2rem;
  font-weight: 700;
  background: var(--gradient-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.main-title-icon {
  font-size: 2.2rem;
  color: var(--primary-purple);
}

.header-subtitle {
  color: var(--text-muted);
  font-size: 16px;
  margin-top: 8px;
}

/* 统计卡片 */
.resource-stats {
  display: flex;
  gap: 16px; /* 减小间距 */
  justify-content: center;
  margin-bottom: 32px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(162, 89, 236, 0.1) 0%, rgba(91, 110, 225, 0.1) 100%);
  padding: 16px; /* 减小内边距 */
  border-radius: var(--radius-lg);
  border: 1px solid rgba(162, 89, 236, 0.15);
  display: flex;
  align-items: center;
  gap: 12px; /* 减小间距 */
  transition: all 0.3s ease;
  min-width: 120px; /* 减小最小宽度 */
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-purple);
}

.stat-icon {
  font-size: 32px;
  color: var(--primary-purple);
  background: rgba(255, 255, 255, 0.8);
  padding: 12px;
  border-radius: 50%;
}

.stat-info {
  text-align: left;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-purple);
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* 搜索栏 */
.search-bar {
  margin-bottom: 32px;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 500px; /* 减小搜索栏最大宽度 */
  margin: 0 auto;
}

.search-icon {
  position: absolute;
  left: 20px;
  font-size: 18px;
  color: var(--text-muted);
  z-index: 2;
}

.custom-search-input {
  flex: 1;
  height: 56px;
  border-radius: var(--radius-xl);
}

.custom-search-input :deep(.el-input__wrapper) {
  border-radius: var(--radius-xl);
  background: white;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border-light);
  min-height: 56px;
  padding: 0 24px 0 50px;
  transition: all 0.3s ease;
}

.custom-search-input :deep(.el-input__wrapper:hover),
.custom-search-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(91, 110, 225, 0.1);
}

.search-btn {
  height: 56px;
  width: 120px;
  background: linear-gradient(135deg, #a259ec 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: var(--radius-xl);
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(162, 89, 236, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(162, 89, 236, 0.4);
}

.search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.search-btn-icon {
  font-size: 16px;
}

/* 资源列表 */
.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* 减小最小宽度 */
  gap: 24px; /* 减小间距 */
}

/* 资源卡片 */
.resource-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(124, 58, 237, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 300px;
}

.resource-card :deep(.el-card__body) {
  padding: 24px; /* 减小内边距 */
  padding-bottom: 32px;
  height: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.resource-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-purple);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.resource-card:hover::before {
  transform: scaleX(1);
}

.resource-card:hover {
  box-shadow: var(--shadow-purple);
  background: rgba(252, 250, 255, 0.98);
  transform: translateY(-6px);
  border-color: var(--primary-purple);
}

/* 资源类型徽章 */
.resource-type-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  width: 50px;
  height: 50px;
  background: var(--gradient-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.type-badge-icon {
  font-size: 22px;
  color: white;
}

/* 举报图标 */
.report-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 69, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-icon:hover {
  background: rgba(255, 69, 0, 0.1);
  border-color: #ff4500;
  transform: scale(1.1);
}

.report-icon-svg {
  font-size: 18px;
  color: #ff4500;
}

/* 资源标题 */
.resource-title {
  font-size: 20px;
  font-weight: 600;
  margin: 25px 0 16px 0;
  color: var(--text-primary);
  line-height: 1.4;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 60px;
}

.resource-card:hover .resource-title {
  color: var(--primary-purple);
}

.title-prefix-icon {
  font-size: 18px;
  color: #ffd700;
}

/* 资源信息标签 */
.resource-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.info-tag {
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(162, 89, 236, 0.1) 0%, rgba(91, 110, 225, 0.1) 100%);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(162, 89, 236, 0.2);
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-icon {
  font-size: 14px;
  color: var(--primary-blue);
}

/* 资源描述 */
.resource-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;

}

/* 资源操作按钮 */
.resource-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: auto;
}

.like-btn, .download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.like-btn {
  border: 2px solid rgba(162, 89, 236, 0.3);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
}

.like-btn:hover {
  border-color: var(--primary-purple);
  background: rgba(162, 89, 236, 0.1);
  color: var(--primary-purple);
}

.like-btn.liked {
  background: var(--gradient-purple);
  border-color: transparent;
  color: white;
}

.download-btn {
  background: linear-gradient(135deg, #a259ec 0%, #8b5cf6 100%); /* 紫色渐变 */
  border: none;
  color: white;
}

.download-btn:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%); /* 深紫色渐变 */
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(162, 89, 236, 0.3);
}

.action-icon {
  font-size: 16px;
}

/* 分页样式 */
.custom-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.custom-pagination :deep(.el-pager li) {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin: 0 4px;
  transition: all 0.3s ease;
}

.custom-pagination :deep(.el-pager li:hover),
.custom-pagination :deep(.el-pager li.is-active) {
  background: linear-gradient(135deg, #a259ec 0%, #8b5cf6 100%);
  color: white;
  border-color: transparent;
}

/* 上传对话框样式 */
.upload-dialog :deep(.el-dialog) {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
}

/* 资源详情弹窗样式 */
.resource-detail-dialog :deep(.el-dialog) {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-purple);
  height: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resource-detail-dialog :deep(.el-dialog__body) {
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 16px;
}

.resource-detail-content {
  padding: 20px 0;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-light);
}

.detail-type-badge {
  width: 60px;
  height: 60px;
  background: var(--gradient-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.detail-badge-icon {
  font-size: 28px;
  color: white;
}

.detail-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-purple);
  line-height: 1.3;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.detail-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(162, 89, 236, 0.08) 0%, rgba(91, 110, 225, 0.08) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(162, 89, 236, 0.15);
}

.detail-info-icon {
  font-size: 18px;
  color: var(--primary-blue);
  flex-shrink: 0;
}

.detail-info-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

.detail-info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}

.detail-description {
  margin-bottom: 32px;
}

.description-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-purple);
  margin: 0 0 16px 0;
}

.description-icon {
  font-size: 20px;
  color: var(--primary-purple);
}

.description-content {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}

.detail-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}

.detail-like-btn, .detail-download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.detail-like-btn {
  border: 2px solid rgba(162, 89, 236, 0.3);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
}

.detail-like-btn:hover {
  border-color: var(--primary-purple);
  background: rgba(162, 89, 236, 0.1);
  color: var(--primary-purple);
}

.detail-like-btn.liked {
  background: var(--gradient-purple);
  border-color: transparent;
  color: white;
}

.detail-download-btn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border: none;
  color: white;
}

.detail-download-btn:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
}

.detail-dialog-footer {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

.detail-dialog-footer .el-button {
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .detail-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .detail-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .detail-like-btn, .detail-download-btn {
    width: 100%;
    justify-content: center;
  }
}

.upload-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border-light);
}

.upload-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-purple);
  margin: 16px 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.upload-header p {
  color: var(--text-muted);
  margin: 0;
}

.upload-header-icon {
  font-size: 40px;
  color: var(--primary-blue);
  background: rgba(91, 110, 225, 0.1);
  padding: 16px;
  border-radius: 50%;
}

.upload-form {
  margin-top: 24px;
}

.upload-form :deep(.el-form-item__label) {
  font-weight: 600;
  color: var(--text-primary);
}

.upload-form :deep(.el-input__wrapper) {
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.upload-form :deep(.el-input__wrapper:hover),
.upload-form :deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(91, 110, 225, 0.1);
}

.upload-component :deep(.el-upload) {
  width: 100%;
}

.dialog-footer {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding-top: 24px;
}

.dialog-footer .el-button {
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .resource-page {
    gap: 24px;
  }
  
  .sidebar {
    width: 260px;
  }
  
  .resource-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 1024px) {
  .resource-page {
    flex-direction: column;
    gap: 20px;
  }
  
  .sidebar {
    position: static;
    width: 100%;
  }
  
  .main-content {
    padding: 24px;
  }
  
  .resource-stats {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .stat-card {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .resource-page {
    padding: 0 12px;
  }
  
  .resource-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .search-container {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-btn {
    width: 100%;
  }
  
  .resource-stats {
    flex-direction: column;
  }
  
  .stat-card {
    min-width: auto;
  }
}
</style>
